<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/integrate.css">
  <title>综合</title>
</head>
<body>
<!--头部导航-->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="mynav">
      <div class="navbar-header">
        <a href="/">
          <img src="imgs/logo.png" alt="jyt">
        </a>
      </div>
      <ul class="nav navbar-nav">
        <li><a href="index.html">实时</a></li>
        <li><a href="dataforms.html">报表</a></li>
        <li><a href="chartforms.html">图表</a></li>
        <li><a href="integrate.html">综合</a></li>
        <li><a href="settings.html">设置</a></li>
      </ul>
    </div>
  </div>
</nav>

<!--今日展示-->
<section class="top">
  <div class="topwrap clearfix">
    <fieldset class="w30 fl clearfix">
      <legend>今日概况</legend>
      <div class="left fl"><i class="fontRed glyphicon glyphicon-map-marker"></i></div>
      <div class="right fl">
        <p><span class="fontRed font32">2</span>超标数量(个)</p>
        <p><span class="font18">145</span>总数量(个)</p>
      </div>
    </fieldset>
    <fieldset class="w30 fl clearfix">
      <legend>今日用水</legend>
      <div class="left fl"><i class="fontCyan glyphicon glyphicon-menu-hamburger"></i></div>
      <div class="right fl">
        <p><span class="fontCyan font32">20</span>实际用水(吨)</p>
        <p><span class="font18">45</span>标准总量(吨)</p>
      </div>
    </fieldset>
    <fieldset class="w30 fl clearfix">
      <legend>实时流量</legend>
      <div class="left fl"><i class="fontYellow glyphicon glyphicon-filter"></i></div>
      <div class="right fl">
        <p><span class="fontYellow font32">0.22</span>实时流量(m³/h)</p>
        <!--<p><span class="font18">45</span>总数量(个)</p>-->
      </div>
    </fieldset>
  </div>
</section>
<!--图表集合-->
<section class="charts">
  <div class="box fl" id="box1"></div>
  <div class="box fl">
    <div class="fl" id="box2"></div>
    <div class="fl w50 list">
      <h4>本月超标水表</h4>
      <table class="table table-bordered">
        <thead>
        <tr>
          <th>通讯号</th>
          <th>水表名称</th>
          <th>超出量</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <th scope="row">1</th>
          <td>水表一</td>
          <td>1</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>水表二</td>
          <td>0.5</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>水表三</td>
          <td>2</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>水表三</td>
          <td>2</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>水表三</td>
          <td>2</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>水表二</td>
          <td>0.5</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>水表三</td>
          <td>2</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>水表三</td>
          <td>2</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>水表三</td>
          <td>2</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="box fl" id="box3"></div>
  <div class="box fl" id="box4"></div>
</section>

<script src="libs/jquery.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="libs/echarts/echarts.js"></script>
<script src="libs/echarts/darkTheme.js"></script>
<script src="js/tool.js"></script>
<script src="js/integrate.js"></script>
</body>
</html>